<template>
  <div>
    <el-main>
      <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="文件名">
          <el-input v-model="searchForm.fileName" placeholder="请输入文件名"></el-input>
        </el-form-item>
        <el-form-item label="文件Key">
          <el-input v-model="searchForm.fileKey" placeholder="请输入文件key"></el-input>
        </el-form-item>
        <el-form-item label="文件类型">
          <el-input v-model="searchForm.fileType" placeholder="请输入文件类型"></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="searchForm.creator" placeholder="请输入创建人"></el-input>
        </el-form-item>

        <el-form-item>
          <div class="block">
            <span class="demonstration">日期查询</span>
            <el-date-picker v-model="pickTime" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" align="right">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain @click="search">查询</el-button>
          <el-button type="warning" plain @click="openWindow">上传文件</el-button>
          <el-button type="danger" plain @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <!--  表格 -->

      <el-table :data="tableData" v-loading="loading" height="500px" style="width: 100%">
        <el-table-column prop="id" label="主键ID" align="center" width="180">
        </el-table-column>
        <el-table-column prop="fileName" label="文件名称" align="center" width="180">
        </el-table-column>
        <el-table-column prop="fileSize" label="文件大小" align="center">
          <!--  进行三元判断 -->
          <!-- 大于 1048576  说明表示是一字节-->
          <template slot-scope="scope">
            <span v-if="scope.row.fileSize>1048576">
              {{Math.ceil(scope.row.fileSize/1024/1024)}}MB
            </span>
            <span v-else>
              {{Math.ceil(scope.row.fileSize/1024)}} kb
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="storageType" label="存储类型" align="center">
        </el-table-column>
        <el-table-column prop="fileType" label="文件类型" align="center">
        </el-table-column>
        <el-table-column prop="creatorName" label="上传人" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="上传时间" align="center">
        </el-table-column>
        <el-table-column prop="consumptionTime" label="消耗时间" align="center">
        </el-table-column>
        <el-table-column prop="fileType" width="200" label="操作" align="center">
          <template slot-scope="scope">
            <!-- <span style="color: #1890ff" class="oper" @click="getUrl(scope.row)">查看
            </span> -->
            <el-button size="mini" @click="getUrl(scope.row)" type="primary">编辑</el-button>

            <!-- <span style="color: #1890ff" class="oper"> 下载</span> -->
            <el-button icon="el-icon-delete" type="danger" size="mini" @click="handleDelete(scope.row)">删除
            </el-button>
            <!-- <span style="color: #1890ff" class="oper" @click="handleDelete(scope.row.fileKey)">
              删除</span> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页工具栏 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="searchForm.pageNum" :page-sizes="[10, 20, 30, 40, 50]" :page-size="10"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-main>

    <!--  新增或者修改对话框 -->
    <system-dialog :title="fileDialog.title" :visible="fileDialog.visible" :height="fileDialog.height"
      :width="fileDialog.width" @onClose="onClose()" @onConfirm="onConfirm()">
      <div slot="content">
        <!-- :data="uploadHeader" -->
        <el-upload class="upload-demo" handleAvatarSuccess :action="uploadUrl" :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove" :on-success="handleAvatarSuccess">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
        <a :href="url" style="color: #409EFF;" target="_blank"> {{fileName}}</a>
        <!-- <el-link type="primary" :href="url" >{{ fileName }}</el-link> -->
        <!-- <span> {{ url }} </span> -->
      </div>
    </system-dialog>

    <el-image ref="preview" :preview-src-list="previewList"> </el-image>
  </div>
</template>

<script>
  import SystemDialog from "@/components/system/SystemDialog";

  import { getToken } from "@/utils/auth";

  import http from "@/utils/request";
  import { fileSetApi } from "@/api/file";
  export default {
    components: {
      SystemDialog: SystemDialog,
    },
    data() {
      return {
        loading: false,
        srcList: [
          "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
          "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
        ],
        viewUrl: "", // 查看url
        tableData: [], //  表格数据，文件
        previewList: [],
        url: "",
        fileName: "",
        uploadHeader: {
          token: getToken(),
        },
        headers: {
          token: this.$store.state.user.token,
        },
        total: 10,

        fileDialog: {
          title: "选择所属菜单",
          width: 520,
          height: 200,
          visible: false,
        },
        searchForm: {
          creatorName: "",
          pageNum: 1,
          pageSize: 10,
          fileName: "",
          fileKey: "",
          fileType: "",
          createTimeBegin: "",
          createTimeEnd: "",
        }, // 搜索表单
        pickTime: [],
        pickerOptions: [],
        token: this.$store.state.user.token,
        imgFileType: ["jpg", "jpeg", "png", "gif"],
      };
    },
    async created() {
      console.log(http.upload);
      this.uploadUrl =
        process.env.VUE_APP_BASE_API + "api/file/upload?module=" + "avatar&token=" + this.$store.state.user.token;

      this.search();
      console.log(res);
    },
    methods: {
      async getUrl(row) {
        // this.imgFileType.some
        // 首先判断是图片还是其它类型的文件，如果是图片就直接进行展示，否则的话就进行下载操作
        //  if()
        this.viewUrl = ""; // 先进行初始化
        this.previewList = []
        console.log(row);
        // some函数 判断有一个就返回true
        //  图片类型和其它的情况都要获取到文件的url
        let res = await fileSetApi.getFileUrl(row.fileKey);
        if (this.imgFileType.some((item) => item == row.fileType)) {
          // 进行图片预览操作
          this.viewUrl = res.data;
          this.previewList.push(this.viewUrl);
          this.$refs.preview.clickHandler();
        } else {
          let url = res.data;
          // 如果不是图片就进行下载操作
          let response = await http.download(row.fileName, url);

        }
        console.log(res);

      },
      async handleDelete(fileKey) {
        let confirm = await this.$myconfirm("确定要删除" + fileKey);
        if (confirm) {
          let res = await fileSetApi.handleDeleteFile(fileKey);
          console.log(res);
          this.$message.success("删除成功");
          this.search();
        }
      },
      onClose() {
        this.fileDialog.visible = false;
      },
      beforeAvatarUpload(file) { },
      /**
       *  文件上传成功钩子
       */
      handleAvatarSuccess(response, file, fileList) {
        this.url = response.data.data.fileUrl;
        this.fileName = response.data.data.fileName;
        this.search()
      },
      reset() {
        this.searchForm = {
          creatorName: "",
          pageNum: 1,
          pageSize: 10,
          fileName: "",
          fileKey: "",
          fileType: "",
          createTimeBegin: "",
          createTimeEnd: "",
        };
        this.search();
      },
      // 文件上传预览钩子 点击文件列表中已上传的文件时的钩子
      handlePictureCardPreview(file) {
        console.log(file);
      },
      // 文件上传成功后的钩子
      // handleSuccess(response, file, fileList) {
      //   console.log(file);
      // },
      /**
       *  文件上传完毕
       */
      handleRemove() { },
      onConfirm() {
        this.fileDialog.visible = false;
        this.search();
      },
      async openWindow() {
        this.fileDialog.visible = true;
        this.fileDialog.title = "新增文件";
      },
      async search() {
        this.searchForm.createTimeBegin = this.pickTime[0];
        this.searchForm.createTimeEnd = this.pickTime[1];
        try {
          this.loading = true;
          let res = await fileSetApi.getFilePage(this.searchForm);
          this.tableData = res.data.records;
          this.total = res.data.total
        } catch (e) {
          console.log(e)
        } finally {
          this.loading = false;
        }

      },

      handleSizeChange(size) {
        this.searchForm.pageSize = size;
        this.search()
      },
      handleCurrentChange(page) {
        this.searchForm.pageNum = page;
        debugger
        this.search()

      },
    },
  };
</script>

<style scoped>
  /deep/ .has-gutter th {
    background-color: #F2F6FC;
  }

  .oper:hover {
    cursor: pointer;
    color: #0009d9 !important;
  }
</style>>
</style>